import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Blockquote from '../../../shared/components/Blockquote';
import * as DockedComposerExamples from './base/example';
import { getDisplayElementById } from '../../shared/helpers';

<div className="doc lead">
  Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window.
</div>

<CodeView exampleOnly isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-connected')}
</CodeView>

## About Docked Composer

### Implementation

The docked composer relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes.

The overflow menu for docked composer, `.slds-docked-composer_overflow`, displays when the number of docked composers exceeds the width of the viewport. The overflow pill displays with a number indicator for all hidden docked composers. A user can invoke a popover with all available docked composers and replace the furthest left docked composer with the one being selected.

When a user clicks on the "pop out" icon in the `.slds-docked-composer__header`, a modal displays and contains the task that was currently in the docked composer.

## Base

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.default)}
</CodeView>

### States

#### Open/Focused

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.states, 'single-composer-focused')}
</CodeView>

#### Closed

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.states, 'single-composer-closed')}
</CodeView>

#### Closed/Focused

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.states, 'single-composer-closed-focused')}
</CodeView>

#### Popped out

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.states, 'single-composer-popout')}
</CodeView>

#### With overflow menu

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.states, 'multiple-composer-overflow')}
</CodeView>

### Examples

#### Log a task

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'task')}
</CodeView>

#### Email Composer

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'email')}
</CodeView>

#### Voice

##### Queued

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-queued')}
</CodeView>

##### Ringing

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-ringing')}
</CodeView>

##### Connected

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-connected')}
</CodeView>

##### Cancelled

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-cancelled')}
</CodeView>

##### Busy

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-busy')}
</CodeView>

##### Call Failed

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-failed')}
</CodeView>

##### No Answer

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-no-answer')}
</CodeView>

##### Call Finished

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-call-finished')}
</CodeView>

##### Call Incoming

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-call-incoming')}
</CodeView>

##### Call Logged

<CodeView isViewport demoStyles="height: 500px; min-width: 615px; overflow: hidden;">
  {getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-call-logged')}
</CodeView>
